<template>
  <div class="app-login">
    <h1>登录页面</h1>
    <form @submit.prevent="handleLogin">
      <div>
        <label for="username">用户名：</label>
        <input
          id="username"
          v-model="userName"
          type="text"
          placeholder="请输入用户名"
          required
        />
      </div>
      <div>
        <label for="password">密码：</label>
        <input
          id="password"
          v-model="password"
          type="password"
          placeholder="请输入密码"
          required
        />
      </div>
      <button type="submit">登录</button>
    </form>
  </div>
</template>

<script>
import { login } from "@/api/user";

export default {
  name: "AppLogin",
  data() {
    return {
      userName: "",
      password: "",
    };
  },
  methods: {
    async handleLogin() {
      try {
      // eslint-disable-next-line no-unused-vars
        const response = await login({
          userName: this.userName,
          password: this.password,
        });
        alert("登录成功");
        this.$router.push("/");
      } catch (error) {
        console.error("登录失败", error);
        alert("登录失败，请检查用户名或密码");
      }
    },
  },
};
</script>
<style scoped>
.app-login {
  text-align: center;
  margin-top: 50px;
}
form {
  display: inline-block;
  text-align: left;
}
form div {
  margin-bottom: 10px;
}
button {
  display: block;
  margin: 10px auto;
}
</style>
